<template>
  <div>
    <el-row :gutter="15">
      <ChartHead />
    </el-row>
    <el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header" >
          <vxe-toolbar>
            <template #buttons>
              <vxe-button icon="fa fa-plus" status="success" @click="insertEvent">新增</vxe-button>
              <vxe-button icon="fa fa-trash-o" status="danger" @click="removeEvent">删除</vxe-button>
              <vxe-button icon="fa fa-save" style="margin: 0 380px 0 10px;" status="primary" @click="saveEvent">保存</vxe-button>

              <vxe-button icon='vxe-icon--print' @click="printEvent1">打印</vxe-button>
              <vxe-button icon='vxe-icon--upload my-success' @click="exportDataEvent">导出数据</vxe-button>
              <vxe-button icon='vxe-icon--download my-success' @click="importDataEvent">导入数据</vxe-button>
              <vxe-input style="margin:0 10px;width: 230px;"  v-model="demo1.filterName" type="search" placeholder="搜索" @keyup="searchEvent1"></vxe-input>
            </template>
          </vxe-toolbar>
        </div>
      </template>

      <vxe-table
        ref="xTable"
        border
        show-overflow
        keep-source
        :import-config="{}"
        :export-config="{}"
        :data="demo1.list"
        :edit-config="{trigger: 'dblclick', mode: 'cell', showStatus: true}">
        <vxe-table-column type="checkbox" width="60"></vxe-table-column>
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="name" title="姓名" sortable type='html' :edit-render="{name: 'input'}">
        </vxe-table-column>
        <vxe-table-column field="position" title="职位" sortable type='html' :edit-render="{name: 'input'}">
        </vxe-table-column>
        <vxe-table-column field="normal" align='center' width="150" sortable title="正常上班" :edit-render="{name: 'input'}">
        </vxe-table-column>
        <vxe-table-column field="late" align='center' sortable title="迟到" :edit-render="{name: 'input'}">
        </vxe-table-column>
        <vxe-table-column field="sick_leave" align='center' sortable title="病假" :edit-render="{name: 'input'}">
        </vxe-table-column>
        <vxe-table-column field="Leave_early" align='center' sortable title="休假" :edit-render="{name: 'input'}">
        </vxe-table-column>
        <vxe-table-column field="vacation" align='center' sortable title="事假" :edit-render="{name: 'input'}">
        </vxe-table-column>
        <vxe-table-column field="compassionate_leave" align='center' sortable title="早退" :edit-render="{name: 'input'}">
        </vxe-table-column>
        <vxe-table-column field="beizhu" width="180" title="备注" :edit-render="{name: 'input'}">
        </vxe-table-column>
        <template #empty>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </vxe-table>
      <br>
      <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="demo1.list.length">
      </el-pagination>
      </div>
    </el-card>

    <el-card>
      <template #header>
          <div class="card-header">
            <span style='font-size:18px'><i class="iconfont icon-shuju"></i> 2020年3月考勤图</span>
            <span style="float: right;">
								<i class='el-icon-setting' style='font-size:18px'></i>
							</span>
          </div>
        </template>
        <div style="height: 350px">
          <Diagram />
        </div>
    </el-card>
  </div>
</template>
<script lang="ts">


import { defineComponent, reactive, ref, onMounted, getCurrentInstance} from 'vue'
import { VxeTableInstance, VxeColumnPropTypes, VxeButtonEvents, VXETable } from 'vxe-table'
import XEUtils from 'xe-utils'
import ChartHead from '/@/views/timecard/head.vue';
import Diagram from '/@/views/timecard/component/diagram.vue';
import * as echarts from 'echarts';

export default defineComponent({
  components: { ChartHead, Diagram},

  setup () {
    const demo1 = reactive({
      filterName: '',
      list: [] as any[],
      tableData: [
        { id: 10001, name: '小X', role: '', position:'人事部经理', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0', sex: '0',beizhu:'',},
        { id: 10002, name: '小A', role: '', position:'项目经理', normal:'29', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0', sex: '1', beizhu:'',},
        { id: 10003, name: '小B', role: '', position:'项目经理', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '1',  beizhu:'',},
        { id: 10004, name: '小C', role: '', position:'项目经理',normal:'25', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'3', sick_leave:'0',  sex: '0', beizhu:'',},
        { id: 10005, name: '小D', role: '', position:'部门经理', normal:'20', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'4', sick_leave:'4',  sex: '0', beizhu:'',},
        { id: 10006, name: '小E', role: '', position:'部门经理', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '0', beizhu:'',},
        { id: 10007, name: '小F', role: '', position:'部门经理', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '1', beizhu:'',},
        { id: 10008, name: '小G', role: '', position:'普通员工', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '1 ', beizhu:'',},
        { id: 10009, name: '小H', role: '', position:'普通员工', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '1 ', beizhu:'',},
        { id: 10010, name: '小I', role: '',position:'普通员工', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '1 ', beizhu:'',},
        { id: 10011, name: '小J', role: '',position:'普通员工', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '1 ', beizhu:'',},
        { id: 10012, name: '小K', role: '',position:'普通员工', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '1 ', beizhu:'',},
        { id: 10013, name: '小L', role: '',position:'普通员工', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '1 ', beizhu:'',},
        { id: 10014, name: '小M', role: '',position:'普通员工', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '1 ', beizhu:'',},
        { id: 10015, name: '小N', role: '',position:'普通员工', normal:'28', late:'0', Leave_early:'0', vacation:'4', compassionate_leave:'0', sick_leave:'0',  sex: '1 ', beizhu:'',},
      ] as any[]
    })

    const sexList = [
      { label: '女', value: '0' },
      { label: '男', value: '1' }
    ]

    const xTable = ref({} as VxeTableInstance)

    //打印
    const printEvent1: VxeButtonEvents.Click = () => {
      const $table = xTable.value
      $table.print()
    }

    //插入
    const insertEvent = async () => {
        const $table = xTable.value
        const record = {
          sex: '1'
        }
        const { row: newRow } = await $table.insert(record)
        $table.setActiveCell(newRow, 'sex')
    }

    //移除
    const removeEvent = () => {
      const $table = xTable.value
      const selectRecords = $table.getCheckboxRecords()
      if (selectRecords.length) {
        VXETable.modal.confirm('您确定要删除选中的数据吗?').then(type => {
          if (type === 'confirm') {
            $table.removeCheckboxRow()
          }
        })
      } else {
        VXETable.modal.message({ message: '请至少选择一条数据', status: 'error' })
      }
    }

    //还原
    const revertEvent = () => {
      const $table = xTable.value
      VXETable.modal.confirm('您确定要还原数据吗?').then(type => {
        if (type === 'confirm') {
          $table.revertData()
        }
      })
    }

    //保存
    const saveEvent = () => {
      const $table = xTable.value
      const { insertRecords, removeRecords, updateRecords } = $table.getRecordset()
      VXETable.modal.alert(`保存成功`)
    }

    const formatterSex: VxeColumnPropTypes.Formatter = ({ cellValue }) => {
      const item = sexList.find(item => item.value === cellValue)
      return item ? item.label : ''
    }

    const clearDataEvent: VxeButtonEvents.Click = () => {
      demo1.tableData = []
    }

    const exportDataEvent = () => {
      const $table = xTable.value
      $table.openExport({ types: ['csv'] })
    }

    const importDataEvent: VxeButtonEvents.Click = () => {
      const $table = xTable.value
      $table.importData()
    }

    const searchEvent1 = () => {
      const filterName = XEUtils.toValueString(demo1.filterName).trim().toLowerCase()
      if (filterName) {
        const filterRE = new RegExp(filterName, 'gi')
        const searchProps = ['name', 'position', 'nomnal', 'address']
        const rest = demo1.tableData.filter(item => searchProps.some(key => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterName) > -1))
        demo1.list = rest.map(row => {
          const item = Object.assign({}, row)
          searchProps.forEach(key => {
            item[key] = XEUtils.toValueString(item[key]).replace(filterRE, match => `<span class="keyword-lighten">${match}</span>`)
          })
          return item
        })
      } else {
        demo1.list = demo1.tableData
      }
    }

    searchEvent1()

    return {
      xTable,
      demo1,
      revertEvent,
      saveEvent,
      insertEvent,
      printEvent1,
      formatterSex,
      clearDataEvent,
      exportDataEvent,
      importDataEvent,
      searchEvent1,
      removeEvent,
    }
  }
});
</script>
<style lang="scss" scoped>
.keyword-lighten {
  color: #000;
  background-color: #FFFF00;
}

.box-card{
  margin:0 0 10px 0;
}
</style>
